<template>
	<view class="user">
		<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
		<view class="u-demo-block" style="background-color: white;">
			<!-- 空位置 -->
			<view class="" style="height: 30rpx;">
			</view>
			<u-swiper  :list="list3" previousMargin="30" nextMargin="30" circular
				:autoplay="true" radius="5" bgColor="#ffffff"></u-swiper>
			<view style="width: 80rpx; padding-left: 20rpx; padding-top: 15rpx; background-color: white;"> <u-tag text="广告" size="mini"  ></u-tag>
			</view>
		</view>
		<!-- #endif -->
		<!-- 上面是轮播图 -->
		<view class="top">
			<image src="../../static/images/history.png" mode=""></image>
			<view class="text">浏览历史</view>
		</view>
		<view class="content">
			<view class="row" v-for="item in listArr">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</view>
		</view>

		<view class="nohistory" v-if="!listArr.length">
			<!-- 			<image src="../../static/images/nohis.png" mode="widthFix"></image>
			<view class="text">暂无浏览记录</view> -->
			<u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/history.png">
			</u-empty>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: [],
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			//跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},

			//获取缓存浏览记录
			getData() {
				let hisArr = uni.getStorageSync("historyArr") || []
				this.listArr = hisArr
				console.log(this.listArr)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f0edf0;
	}
</style>
<style lang="scss">
	.user {
		.top {
			padding: 0 0 30rpx;
			background: white;
			color: #666;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}

			.text {
				font-size: 38rpx;
				padding-top: 20rpx;
			}
		}

		.content {
			padding: 10rpx;

			.row {
				background-color: white;
				border-bottom: 1px dotted #efefef;
				padding: 30rpx 20rpx;
				border: #f5f2f5 solid 2px;
				border-radius: 10px;
				margin-top: 15rpx;
			}
		}

		.nohistory {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 450rpx;
			}

			.text {
				font-size: 26rpx;
				color: #888;
			}
		}
	}
</style>